<%@ page language="java" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<base href="<%=basePath%>">
		<title></title>
		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		<meta http-equiv="expires" content="0">
		<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
		<meta http-equiv="description" content="This is my page">
		<link rel="stylesheet" type="text/css" href="static/css/style.css">
		<script src="static/js/jquery-1.7.1.min.js"></script>
		<script src="static/js/jquery.masonry.min.js"></script>
		<script src="static/js/waterfall.js"></script>
	</head>
	<body class="demos">
		<div id="wrapper">
			<header id="header">
			</header>

			<div id="content">
				<div id="container"
					class="transitions-enabled infinite-scroll clearfix">
					<c:forEach items="${dp.list}" var="e">
						<c:forEach items="${fn:split(e.content, ',')}" var="e1" varStatus="status">
							<c:if test="${status.count==1}">
								<div class="box col2">
									<p><a href="view/${e.id}.html"><img src="${e1}/160"></img></a></p>
								</div>
							</c:if>
						</c:forEach>
					</c:forEach>
				</div>
				<!-- #container -->
				<nav id="next_page">
				<a href="list/${dp.pageNo+1}/${dp.pageSize}.html"></a>
				</nav>

				<div id="page_loading">
					<img src="static/img/ajax-loader.gif" alt="page loading">
					<span>给力加载中……</span>
				</div>
			</div>

			<footer id="site-footer">
			xxx
			</footer>
		</div>
		<script>
		
$(function () {
	var $container = $("#container");
	$container.imagesLoaded(function () {
		$container.masonry({itemSelector:".box", columnWidth:100});
	});
	
	
	var loading=false;
	$(window).bind("scroll", function () {
		if ($(document).scrollTop() + $(window).height() > $(document).height() - 10 && !loading) {
			loading=true;
			$.ajax({
				url:$("#next_page a").attr("href"), 
				type:"POST", 
				success:function (data) {
					next = $(data).find("#next_page a");
					$("#next_page").html(next);
					box = $(data).find("#container .box");
					$("#container").append(box);
					$newElems = box;
					$newElems.imagesLoaded(function () {
						$container.masonry("appended", $newElems, true);
						loading=false;
					});
				}
			});
		}
	});
});
		</script>
	</body>
</html>